<template>
	<!-- 线上祭祀 -->
	<view class="sacrifice" >
		<view class="sacrifice_body">
			<view class="sacrifice_box" :style="'background-image: url('+photo_cdn+'zpupload/20230720/e5c08d1d578cf2f00a.png);'">
				<view class="jb_renter_border flexc"  :style="'background-image: url('+photo_cdn+'zpupload/20230720/c302a2d961da2589db.png);'">
					<image class="jb_renter_img"  @tap="toEdit()"  :src="photo_cdn+worshipHallInfo.photo" mode="aspectFill"></image>
				</view>
				<view class="jb_renter_info">
					<view v-if="worshipHallInfo.name" class="jb_ren_name">{{worshipHallInfo.name}}</view>
					<view v-if="worshipHallInfo.birthday&&worshipHallInfo.deathday" class="jb_ren_times">{{worshipHallInfo.birthday}} - {{worshipHallInfo.deathday}}</view>
					<view class="jb_ren_linex"></view>
					<view v-if="worshipHallInfo.elegiac" class="jb_ren_slogan twoline">{{worshipHallInfo.elegiac}}</view>
				</view>
				<view class="jb_edit" @tap="toEdit()" v-if="is_shaikh==1">编辑灵堂信息</view>
			</view>
			
			<view class="sacrifice_bottom" :style="{height:bottom_height+'px',backgroundImage:'url('+photo_cdn+'zpupload/20230720/a9dc02e99be9e070f0.png )'}" >
				<view class="jb_desk_view flex jus-c" :style="'background-image: url('+photo_cdn+'zpupload/20230720/d2cf043c4bf289fddb.png);'">
					<!-- 贡品桌 -->
					<view class="desk_gp_list flex flex-wrap jus-c">
						<view class="desk_gp_isimg" v-for="(item,index) in worshipGoodsList" :key="index" @tap="toGoods(item)">
							<image class="desk_img" :src="photo_cdn+item.photo" mode="aspectFit"></image>
							<view v-if="item.amount>1&&item.amount<=99" class="goods_amount">{{item.amount}}</view>
							<view v-if="item.amount>99" class="goods_amount_more">99+</view>
						</view>	
					</view>
					<view v-if="worshipGoodsList.length" class="look_worship" @tap="look_worship">查看祭拜记录</view>
				</view>
			
				<view class="tojibaibtn" @tap="tojibai" :style="'background-image: url('+photo_cdn+'zpupload/20230720/735636143cd6185611.png);'"></view>
				<!-- 点击祭拜 -->
			</view>
		</view>
		
		
		<!-- 贡品阁 -->	
		<uni-popup ref="tributege"  type="center" :mask-click="true" :animation="false" >
			<view  class="tributege_view" :style="'background-image: url('+photo_cdn+'zpupload/20230720/1ad7a2497be7616651.png)'">
				<image @tap="clonepup" class="closebtn" :style="'background-image: url('+photo_cdn+'zpupload/20230905/9d2700620096a24127.png)'" mode=""></image>
				<view class="tributeg_list flex flex-wrap">
					<view class="tributeg_item" v-for="(item,index) in worshipGoods" :key="index" >
						<view class="tributeg_i_gpbg" :style="'background-image: url('+photo_cdn+'zpupload/20230720/904c284c53ebdc82ca.png);'">
							<image class="tributeg_i_img" :src="photo_cdn+item.photo" mode="aspectFit"></image>
							<view class="tributeg_i_name">{{item.title}}</view>
						</view>	
						
						
						<!-- <view  @tap="add_tribute(item)"  class="tributeg_i_price" :style="'background-image: url('+photo_cdn+'zpupload/20230720/1d111205d33bb00b5f.png);'" style="display: flex; justify-content: center; align-items: center;">
							￥{{item.price}}
						</view> -->
						<view    class="tributeg_i_price" :style="'background-image: url('+photo_cdn+'zpupload/20230720/1d111205d33bb00b5f.png);'" style="display: flex; justify-content: center; align-items: center;">
							￥{{item.price}}
						</view>
						
						<view  @tap="add_tribute2(item)"  class="tributeg_i_price" :style="'background-image: url('+photo_cdn+'zpupload/20230720/1d111205d33bb00b5f.png);'" style="display: flex; justify-content: center; align-items: center;">
							祭拜
						</view> 
						
						<!-- <view @tap="add_tribute1(item)"  class="tributeg_i_price" :style="'background-image: url('+photo_cdn+'zpupload/20230720/1d111205d33bb00b5f.png);'" style="margin-top: 15rpx; font-size: 16rpx
						;display: flex; justify-content: center; align-items: center;">
							积分:{{item.score_price}}
						</view> -->
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="goods_popup" type="center" :mask-click="true" :animation="true" >
			<view class="goods_info">
				<image class="close_img" :src="photo_cdn+ 'zpupload/static/icon/closeicon.png'" @tap="closepup"></image>
				<scroll-view scroll-y="true" class="scroll_y">		
					<view class="goods_info_list" v-for="(items,indexs) in worshipLog_info" :key="indexs"  >
						<view class="worship_info">
							<view class="info_title">{{items.goods_name}}</view>
							<view class="info_num">
								<view class="num_money">{{items.intro}}</view>
								<view class="num_time">{{items.createtime}}</view>
							</view>
						</view>
					</view>
				</scroll-view>			
			</view>
		</uni-popup>
		
		
		<paytype ref="paytype" @payreturn="payreturn" :price="need_pay"></paytype>
		<!-- 选择支付方式 -->
		
		<lff-barrage ref="lffBarrage" :maxTop="240" type="leftBottom"></lff-barrage>
		<!-- 弹幕组件 -->
		
		
		<!-- 选择支付方式 -->
		<view>
			<uni-popup :isnonehover="false" type="bottom"  ref="popup" >
				<view class="LeavingAmessage">
					<view class="titelmodel flex ali-c jus-b">
						<view class="text">购买方式</view>
						<image class="imgs" :src="photo_cdn+'zpupload/static/img/close_icon.png'" mode="aspectFit"></image>
					</view>					
					<!-- 支付方式 -->
					<view class="paytypelist">	
						<radio-group color="#227afc" @change="radioChange" >		
							<!-- #ifdef   H5 || MP-WEIXIN || APP-PLUS  -->
							<view>
							<label class="uni-list-cell uni-list-cell-pd" >
								<view class="paytypelist_item felx ali-c jus-b">
									<view class="felx ali-c">
										<image class="payicon" :src="photo_cdn+'zpupload/static/img/weixin.png'" mode="aspectFit"></image>
										<text class="pay_test">微信支付</text>
									</view>
									<view style="display: flex;">
										<!-- <view class="" style="margin-right: 20rpx;">
											¥:&nbsp;{{price}}
										</view> -->
										<radio :color="$themecolor" value="1" :checked="chinds==1" />
									</view>
								</view>
							</label>
							</view>
							<!-- #endif -->	
							
							
							<view>
							<label class="uni-list-cell uni-list-cell-pd" >
								<view class="paytypelist_item felx ali-c jus-b">
									<view class="felx ali-c">
										<image class="payicon" :src="photo_cdn+'zpupload/static/img/jinbi.png'" mode="aspectFit"></image>
										<text class="pay_test">金币支付</text>
									</view>
									<view style="display: flex;" >
									 <!-- <view class="" style="margin-right: 20rpx;">
									 	金币:&nbsp;{{score_price}}
									 </view>	 -->
									 <radio :color="$themecolor" value="3" :checked="chinds==3" />
									</view>
								</view>
							</label>
							</view>
							
							<!-- #ifdef APP-PLUS || H5 || MP-ALIPAY  -->
							<view class="">
							<label class="uni-list-cell uni-list-cell-pd" >
								<view class="paytypelist_item felx ali-c jus-b">
									<view class="felx ali-c">
										<image class="payicon" :src="photo_cdn+'zpupload/static/img/alipay.png'" mode="aspectFit"></image>
										<text class="pay_test">支付宝</text>
									</view>
									<view>
										<radio :color="$themecolor" value="2" :checked="chinds==2" />
									</view>
								</view>
							</label>
							</view>
							<!-- #endif -->
							
						</radio-group>
					</view>
					
					<view class="paytype_foot">
						<view class="submitbtn active" @tap="payreturnfun">确认支付</view>
					</view>
					
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	import {apppay} from "@/utils/apppay.js";
	import {worshipHallInfo,displayWorshipGoods,createOrder,worshipLog,createWorshipGood} from "@/utils/api/zupu.js";
	import paytype from "@/components/paytype/paytype.vue";
	import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
	let {photo_cdn} = config.baseUrl;
	let ttt = "";
	export default {
		data() {
			return {
				people_id:'',
				photo_cdn,
				page:0,
				is_shaikh:'',//判断是否有权限编辑
				worshipHallInfo:{},
				worshipGoods:[],
				worshipGoodsList:[],//桌子上的贡品
				worshipLog_info:[],//贡品祭拜信息
				scrollHeight:0,
				bottom_height:0,
				
				need_pay:'',//创建订单支付金额
				order_info:{},//订单信息
				pay_way:'',//支付方式
				log_id:'',//支付日志id
				amount:'',//支付金额
				
				worship_log_list:[],//祭拜记录
				lbxbindex: 0,
				
				jibaitype:1,
				itemdata:null,
				
				//1微信  2支付宝 3金币
				chinds:1,
				isshowpup:false,
				price:'',  //金额
				score_price:'',//金币
				paydata:null
				
				
				
			}
		},
		components:{
			paytype,
			lffBarrage,
		},
		onLoad(option) {
			this.people_id = option.people_id
			this.$nextTick(()=>{
				this.computeheight()
			})
			this.displayWorshipGoodsfun();
			
	
		},
		onUnload() {
			clearInterval(ttt);
		},
		onShow(){
			this.worshipHallInfofun();
		},
		methods: {
			//确认支付
			payreturnfun(){
				console.log(this.chinds)
				// this.isshowpup = false;
				this.$refs.popup.close()
				if(this.chinds == 1){
					this.add_tribute(this.paydata);
				}
				
				if(this.chinds == 2){
					this.add_tribute(this.paydata);
				}
				
				if(this.chinds == 3){
					this.add_tribute1(this.paydata);
				}
			},
			//单选改变后
			radioChange(evt){
				console.log(evt)
				let  that = this ;
				that.chinds = evt.detail.value
				console.log(that.chinds)
				//处理显示需要支付的金额
			},
			//获取祭祀记录
			worshipLogfun(){
				console.info("获取祭祀记录");
				clearInterval(ttt);
				worshipLog({
					worship_hall_id:this.worshipHallInfo.id
				}).then((res)=>{
					if(res.code==1){
						this.worship_log_list = res.data.worshipLog;
						
						// setTimeout(()=>{
						// 	this.$refs.lffBarrage.add({
						// 		item: "CES",
						// 		face: 'https://oss.jxdsy.cn/zpupload/20231028/63320b6b30f7e9a0d7.jpeg',
						// 		nickname: "测试",
						// 		user_id: "1",
						// 	});
						// },1500)
						
						try {
							//弹幕
							ttt = setInterval(() => {
								if (this.worship_log_list.length <= this.lbxbindex) {
									clearInterval(ttt);
								} else {
									let itemval = this.worship_log_list[this.lbxbindex];
									let text = `${itemval.intro} 了 ${itemval.goods_name}`;
									this.$refs.lffBarrage.add({
										item: text,
										face: "",
										nickname: '',
										user_id: ""
									});
								}
								this.lbxbindex++;
							}, 2000)
						} catch (e) {
							//TODO handle the exception
							clearInterval(ttt);
						}
						
					}else{
						this.$api.msg(res.msg)
					}
				})
			},
			computeheight(){
				let query = uni.createSelectorQuery().select(".sacrifice_body");
				query.boundingClientRect((data)=> {
					this.bottom_height = data.height - 400;
				}).exec();
			},
			//获取灵堂主人信息
			worshipHallInfofun(){
				worshipHallInfo({
					people_id:this.people_id
				}).then((res)=>{
					if(res.code==1){
						this.worshipHallInfo = res.data.worshipHallInfo;
						this.is_shaikh = res.data.is_shaikh;
						this.worshipGoodsList = res.data.worshipGoodsList;
						
						if(this.worship_log_list.length==0){
							this.worshipLogfun();//获取祭祀记录
						}
					}
				})
			},
			clonepup(){
				this.$refs.tributege.close()
			},
			tojibai(){
				this.$refs.tributege.open()
			},
			//获取贡品列表
			displayWorshipGoodsfun(){
				this.page++
				displayWorshipGoods({
					page:this.page
				}).then(res=>{
					if(res.code==1){
						this.worshipGoods = res.data.worshipGoods;
					}
				})
			},
			add_tribute2(data){
				// this.isshowpup = true;
					this.$refs.popup.open('bottom')
				console.log(data)	
				this.paydata = data;
				this.price = data.price;  //金额
				this.score_price = data.score_price;//金币
				
			},
			//添加贡品
			add_tribute(data){	
				if(this.worshipGoodsList.length>=10){
					uni.showToast({
						title:"桌子已经放不下了",
						icon:"none"
					})
					return false;
				}
				this.$showModal({
					title:'提示',
					concent:`您确定要上贡${data.title}吗？`,
					confirmVal:'确定',
					cancelVal:'取消',
				}).then(res=>{
					this.need_pay = data.price;
					this.order_info.goods_id = data.id;
					this.order_info.total_price = data.price;
					this.order_info.worship_hall_id = this.worshipHallInfo.id
					console.log(this.order_info,'.....')
					this.$refs.paytype.show();
					this.clonepup();
				}).catch(err=>{
					console.log(err)
				})	
			},
			// 积分消费贡品
			add_tribute1(data){
				if(this.worshipGoodsList.length>=10){
					uni.showToast({
						title:"桌子已经放不下了",
						icon:"none"
					})
					return false;
				}
				this.$showModal({
					title:'提示',
					concent:`您确定要上贡${data.title}吗？`,
					confirmVal:'确定',
					cancelVal:'取消',
				}).then(res=>{
					this.need_pay = data.price;
					this.order_info.goods_id = data.id;
					this.order_info.total_price = data.price;
					this.order_info.worship_hall_id = this.worshipHallInfo.id
					console.log(this.order_info,'.....')
					this.createGoodOrder();
					this.clonepup();
				}).catch(err=>{
					console.log(err)
				})	
			},
			createGoodOrder(){
				createWorshipGood(this.order_info).then(res=>{
					console.log(res)
					
					if(res.code == 1){
						uni.showToast({
							title:"支付成功"
						})
						this.worshipHallInfofun();
						this.worshipLogfun();
						
					}
				})
			},
			
			//选择完支付方式之后
			// paytype 1 微信 2支付宝
			payreturn(paytype){
				// pay_way:"weixin",//支付方式 '支付方式:weixin=微信支付,alipay=支付宝支付'
				console.info("paytype",paytype);
				if(paytype==1){
					this.pay_way = 'weixin';
					this.createOrderfun();
				}else if(paytype==2){//支付宝支付
					this.pay_way = 'alipay';
					this.createOrderfun();
				}
			},
			//创建订单
			createOrderfun(){
				createOrder({
					pay_way:this.pay_way,
					need_pay:this.need_pay,
					...this.order_info
				}).then((res)=>{
					if(res.code==1){
						this.log_id = res.data.payLog.id;
						this.amount = res.data.orderInfo.need_pay;
						if(this.pay_way=='weixin'){
							this.weixinAlipayfun('weixin');
						}else{
							this.weixinAlipayfun('alipay');
						}
					}
				})
			},
			//微信支付宝支付
			weixinAlipayfun(paytype){
				//paytype 'weixin'微信 'alipay'支付宝
				apppay(
					this.log_id,
					this.amount,
					paytype,
				).then((res)=>{
					console.info(res);
					uni.showToast({
						title:"支付成功"
					})
					this.worshipHallInfofun();
					this.worshipLogfun();
					
				}).catch((err)=>{
					console.log(err);
				})
			},
			//查看祭拜记录
			look_worship(){
				uni.navigateTo({
					url:`/pages/zupu/worship_record/worship_record?hall_id=${this.worshipHallInfo.id}&name=${this.worshipHallInfo.name}`
				})
			},
			//去编辑灵堂
			toEdit(){
				uni.navigateTo({
					url:`/pages/zupu/create_mourning/create_mourning?mourn_id=${this.worshipHallInfo.id}&people_id=${this.people_id}&source=2`
				})
			},
			//查看贡品
			toGoods(item){
				console.log(item)
				this.$refs.goods_popup.open();
				worshipLog({
					goods_id:item.goods_id,
					worship_hall_id:this.worshipHallInfo.id
				}).then(res=>{
					if(res.code==1){
						this.worshipLog_info = res.data.worshipLog;
					}else{
						this.$api.msg(res.msg)
					}
					
				})
			},
			//关闭弹窗
			closepup(){
				this.$refs.goods_popup.close();
			}
		}
	}
</script>

<style lang="scss">
	.uni-list-cell{
		width: 100%;
	}
	.lu-popup-content{
		border-radius: 14upx;
	}
	.limayouhui{
		color: skyblue;
		font-size: 30upx;
	}
	.LeavingAmessage{
		background-color: #FFFFFF;
		height: 680upx;
		padding: 24upx;
		padding-top: 0;
		overflow: hidden;
		
		.titelmodel{
			height:90upx;
			line-height: 90upx;
			font-size:36upx;
			font-weight:500;
			color:rgba(0,0,0,1);
			.imgs{
				width:36upx;
				height:36upx;
			}
		}
		.paymoney{
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 60upx 0;
			color:#000000;
			font-size: 32upx;
			.num{
				font-size: 48upx;
				font-weight: 700;
			}
		}
		.paytypelist{
			.paytypelist_item{
				margin-bottom: 40upx;
				height: 80upx;
				line-height: 80upx;
				border-bottom: 1px solid rgba(238,238,238,1);
	
				.payicon{
					width: 44upx;
					height: 44upx;
				}
				.pay_test{
					font-size:34upx;
					color:#000000;
					font-weight:500;
					margin-left: 30upx;
				}
			}
			.paytypelist_item:nth-last-child(1){
				border: 0;
			}
		}
		
		.paytype_foot{
			height: 94upx;
			line-height: 94upx;
			
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 100upx;
			/* #ifdef H5 */
			bottom: 100upx;
			/* #endif */
			
			.paytype_foot_botton{
				font-weight:500;
				color:rgba(0,0,0,1);
				text-align: center;
				font-size:36upx;
				margin: 0 24upx;
				border-top:1px solid rgba(245,241,241,1);
			}
		}
	}
	
	
	.submitbtn{
		margin: 60upx 24upx;
		height:88upx;
		line-height: 88upx;
		text-align: center;
		background:rgba(254,197,156,1);
		border-radius:12upx;
		font-size:32upx;
		color:rgba(255,255,255,1);
	}
	
	.submitbtn.active{
		background: $themecolor;
	}
	
	.tishi{
		font-size:24upx;
		font-weight:500;
		color:skyblue;
		line-height: 110%;
	}
	@import "./sacrifice.scss";
</style>
